<template>
  <view class="card">
    <view class="card-header">
      <view class="card-header-title"> {{ title }} </view>
      <view class="card-header-state" :style="{backgroundColor:stateColor, color:colors}"> {{ state }} </view>
    </view>
    <view class="card-content">
      <view class="ellipsis"> {{ content }} </view>
    </view>
    <view class="card-footer">
      <view class="card-footer-f" :style="{backgroundColor:stateColorFf, color:colorsFf, padding: paddingFf}"> {{ ff }} </view>
      <view class="card-footer-r"> {{ fr }} </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    state: {
      type: String,
      default: "状态",
    },
    stateColor: {
      type: String,
      default: "#e0c59f",
    },
    colors: {
      type: String,
      default: "#333",
    },
    stateColorFf: {
      type: String,
      default: "#fceced",
    },
    colorsFf: {
      type: String,
      default: "red",
    },
    paddingFf: {
      type: String,
      default: '0 20upx',
    },
    content: {
      type: String,
      default: "card",
    },
    fr: {
      type: String,
      default: "card",
    },
    ff: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0 0 6upx 4upx rgba(165, 165, 165, 0.2);
  border-radius: 10upx;
  // margin-bottom: 30upx;
  padding: 15upx 20upx;
  margin: 8upx 15upx;

  &-header {
    display: flex;
    justify-content: space-between;
    padding: 16upx;
    &-title {
      color: #6a6a6a;
      font-size: 28upx;
      font-weight: 550;
    }
    &-state {
      font-size: 24upx;
      // width: 120upx;
      height: 40upx;
      padding: 0 15upx;
      color: #000000;
      border-radius: 25upx;
      line-height: 40upx;
      text-align: center;
    }
  }

  &-content {
    font-size: 26upx;
    padding: 0 16upx;
    color: #6a6a6a;
    max-height: 68upx;
    overflow: hidden;

    .ellipsis{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  &-footer {
    display: flex;
    font-size: 26upx;
    padding: 16upx;
    justify-content: space-between;
    &-f {
      color: red;
      padding: 0 20upx;
      height: 40upx;
      border-radius: 20upx;
      line-height: 40upx;
      text-align: center;
      background-color: #fceced;
    }
    &-r {
      color: #9c9c9c;
    }
  }
}
</style>
